<template>
	<div class="chapter-mine chapter-mine-d">
		<div class="exam-mine-nav">
			<van-nav-bar @click-left="clickLeft">
				<template #left>
					<img class="left-img" src="../../assets/img/back.png" />
				</template>
				<template #title>
					<div class="pc-b1">
						<div class="chapter-pc-title d-flex">
							<van-field v-model="value1" left-icon="" right-icon="search" placeholder="请输入你需要搜索的书名"
								@click-right-icon="onSearch" />
							<div class="btn-box btn-zsd">知识点</div>
							<div class="btn-box btn-dt">答题</div>
						</div>
					</div>
				</template>
				<template #right>
					<div class="pc-b1 exam-pc-right">
						<div class="d-flex">
							<div class="rt-txt">目录</div>
							<div class="rt-txt" @click="showPicker = true">设置</div>
							<div class="rt-txt">登录</div>
						</div>
					</div>
				</template>
			</van-nav-bar>
		</div>
		<div class="chapter-paper-box">
			<div class="tab-box d-flex d-col-bottom">
				<div class="answer-img">
					<img src="../../assets/img/answer.png" />
				</div>
				<div class="knowledge-img" @click="openUrl('/answer')">
					<img src="../../assets/img/knowledge.png" />
				</div>
			</div>
			<div class="chapter-content">
				<div class="chapter-jj-box">
					<div class="intro-box">
						<span class="mr10">简介</span>
						{{detail.introduction}}
					</div>
					<div class="intro-box">
						<span class="mr10 mark">知识点</span>
						{{detail.knowledge}}
					</div>
					<div class="chapter-inset">
						<img src="../../assets/img/book/book12.png" />
					</div>
				</div>
			</div>
		</div>
		<van-popup v-model:show="showPicker" round position="right">
			<settings></settings>
		</van-popup>
	</div>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useRouter
	} from "vue-router";
	import Settings from "@/components/Settings.vue";
	const router = useRouter();
	const showPicker = ref(false);
	const clickLeft = () => {
		router.back();
	};
	const openUrl = (url) => {
		// router.back();
		router.push(url);
	};
	
	const detail = ref({
		title: "章節主題1",
		introduction: `1925年，魯迅在北京擔任大學講師期間，因支持學生運動而受到當時所謂“正人君子”的流言攻擊和排擠。
		1926 年， 北洋軍閥政府槍殺進步學生， 製造“ 三· 一八” 慘案。
		作者魯迅寫下《 紀念劉和珍君》 等一系列文章， 熱情支持學生的正義鬥爭， 控訴北洋軍閥政府的殘暴， 結果遭到當局的通緝而不得不遠走廈門避難。《 朝花夕拾》 中的作品雖然都是在追憶往事， 但也是“ 借題發揮”， 影射、 譏諷當時的社會現實。
		主體思想
		具有强烈的反封建思想， 文章中具有對封建教育、 封建道德、 封建頑固派的批判意識；
		表現了作者對親友和師長的崇敬、 懷念之情；
		批判封建思想、 封建制度對青少年的毒害思想；
		揭露思想文化戰線上資產階級文人的本質；
		作者以熾烈的感情和濃重的筆墨， 揭示了一個時代的各個側面。 `,
		knowledge: `具有强烈的反封建思想，文章中具有對封建教育、封建道德、封建頑固派的批判意識；
									表現了作者對親友和師長的崇敬、懷念之情；
									批判封建思想、封建制度對青少年的毒害思想；
									揭露思想文化戰線上資產階級文人的本質；
									作者以熾烈的感情和濃重的筆墨，揭示了一個時代的各個側面。`
	
	})
</script>
git
<style lang="scss" scoped>
	.chapter-mine {
		background-image: url("../../assets/img/mobile/back-flowers.png");
		background-size: 430px 318px;
		background-position: 30px 0;
		background-repeat: no-repeat;
		background-color: #fff;
		position: relative;

		.exam-pc-right {
			.rt-txt {
				margin-left: 65px;
			}
		}

		.chapter-pc-title {
			width: 700px;
			margin-left: -600px;

			.btn-box {
				width: 108px;
				height: 44px;
				padding: 0;
				line-height: 44px;
				background: linear-gradient(180deg, #83D1FF 0%, #4CA4FE 100%);
				color: #fff;

				&.btn-zsd {
					margin: 0 16px 0 100px;
				}

				&.btn-dt {
					background: linear-gradient(180deg, #FFBD02 0%, #FF8801 100%);
				}
			}
		}

		.chapter-paper-box {
			.chapter-content {
				background: #f7f9fc;
				padding: 12px 24px;

				.intro-box {
					margin-top: 20px;
					color: #9b9da0;

					span {
						font-size: 14px;
						padding: 0 8px;
						font-weight: bold;
						color: #fff;
						display: inline-block;
						background: linear-gradient(142deg, #65e98e 0%, #07aa33 100%);
						border-radius: 4px 4px 4px 4px;
					}

					.mark {
						background: linear-gradient(40deg,
								#4798cb 0%,
								rgba(71, 152, 203, 0.5) 100%);
					}
				}

				.chapter-inset {
					width: 100%;
					padding-top: 18px;
					text-align: center;
				}

				.chapter-jj-box {
					@media screen and (min-width: 920px) {
						width: 920px;
						margin: 0 auto;
					}
				}
			}

			.tab-box {
				padding: 16px;

				div {
					width: calc(50% - 5px);

					img {
						width: 100%;
					}
				}

				.answer-img {
					margin-right: 10px;
				}

				.knowledge-img {
					padding-bottom: 8px;
				}

				@media screen and (min-width: 700px) {
					justify-content: center;

					div {
						width: 238px;

						img {
							width: 100%;
						}
					}
				}
			}
		}

		@media screen and (min-width: 800px) {
			background-size: 600px 418px;
			background-position: center -30px;
		}

		@media screen and (min-width: 1400px) {
			background: #F7F9FC;
		}
	}
</style>